<template>
  <div class="case-total">
    <div class="container">
      <div class="left-cnt">
        <h1>了解亿拓SCRM<br />更多功能及应用案例</h1>
        <p>预约专属顾问 ></p>
      </div>
      <div class="right-cnt">
        <h1>立即预约</h1>
        <ul>
          <li>
            <p>您的称呼：</p>
            <p>
              <el-input
                v-model="dataFrom.name"
                placeholder="请输入您的姓名"
              ></el-input>
            </p>
          </li>
          <li>
            <p>企业名称：</p>
            <p>
              <el-input
                v-model="dataFrom.qyName"
                placeholder="请输入企业名称"
              ></el-input>
            </p>
          </li>
          <li>
            <p>手机号码：</p>
            <p>
              <el-input
                v-model="dataFrom.phone"
                placeholder="请输入手机号码"
              ></el-input>
            </p>
          </li>
          <li style="margin-left: 4px" class="code">
            <p>验 证 码：</p>
            <p :class="isFocus ? 'lineHeight' : ''">
              <el-input
                v-model="dataFrom.code"
                placeholder="请输入验证码"
                @focus="isFocus = true"
                @blur="isFocus = false"
              ></el-input>
              <span class="line"></span>
              <span class="code-span">获取验证码</span>
            </p>
          </li>
          <li>
            <p>兴趣选择：</p>
            <p>
              <el-select
                v-model="dataFrom.like"
                placeholder="请选择您的兴趣内容"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
          </li>
        </ul>

        <div class="btn-total">
            <div class="btn">立即预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Case",

  data() {
    return {
      dataFrom: {
        name: "",
        qyName: "",
        phone: "",
        code: "",
        like: "",
      },
      isFocus: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.case-total {
  .el-input__inner {
    width: 306px;
  }
}
</style>

<style lang="scss" scoped>
li {
  list-style-type: none;
}
.case-total {
  width: 100%;
  .container {
    display: flex;
    width: 1250px;
    margin: 0 auto;
    justify-content: space-between;
  }
  .left-cnt {
    height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: PingFang SC;
    h1 {
      font-size: 36px;
      font-weight: 600;
      color: #181b24;
      line-height: 54px;
      width: 325px;
    }
    p {
      margin-top: 60px;
      color: #4574f7;
      font-size: 20px;
      cursor: pointer;
      font-weight: 400;
    }
  }
  .right-cnt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: PingFang SC;
    h1 {
      font-size: 24px;
      font-weight: 400;
      color: #181b24;
      margin-bottom: 41px;
    }
    li {
      display: flex;
      margin-bottom: 15px;
      p:nth-child(1) {
        position: relative;
        top: 8px;
      }
    }
    .btn-total {
        display: flex;
        justify-content: right;
    }
    .btn {
      width: 306px;
      height: 40px;
      background: #4574f7;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      margin-top: 25px;
      cursor: pointer;
    }
    .code {
      p:nth-child(2) {
        width: 306px;
        background: #fff;
        border: 1px solid rgb(220, 223, 230);
        height: 40px;
        border-radius: 5px;
        display: flex;
        font-size: 14px;
        .line {
          display: inline-block;
          width: 2px;
          height: 24px;
          background: rgb(220, 223, 230);
          margin-top: 8px;
        }
        .code-span {
          line-height: 40px;
          display: inline-block;
          margin-left: 10px;
          color: rgb(78, 164, 253);
        }
        ::v-deep.el-input {
          width: 210px !important;
        }
        ::v-deep.el-input__inner {
          width: 190px !important;
          border: none;
        }
      }
      .lineHeight {
        border: 1px solid rgb(78, 164, 253) !important;
      }
    }
  }
}
</style>